<template>
    <div class="skeleton-container">
        <!-- Header Section -->
        <div class="header">
            <div class="title-placeholder"></div>
            <div class="button-container">
                <div class="button-placeholder"></div>
                <div class="button-placeholder secondary"></div>
            </div>
            <div class="subtitle-placeholder"></div>
        </div>

        <!-- Content Section -->
        <div class="content">
            <!-- Left Card: Population Statistics -->
            <div class="card-skeleton">
                <div class="card-title-placeholder"></div>
                <div class="chart-area">
                    <div class="y-axis-label-placeholder"></div>
                    <div class="bar-chart-wrapper">
                        <div class="y-axis-placeholder"></div>
                        <div class="bars-container">
                            <div v-for="i in 6" :key="i" :style="{ height: getBarHeight(i) }" class="bar-placeholder">
                            </div>
                        </div>
                    </div>
                    <div class="x-axis-placeholder"></div>
                </div>
            </div>

            <!-- Middle Card: Shanghai Map Visualization -->
            <div class="card-skeleton map-card-skeleton">
                <div class="card-title-placeholder wide"></div>
                <div class="map-placeholder">
                    <!-- Small region placeholders within the map -->
                    <div class="map-region region-1"></div>
                    <div class="map-region region-2"></div>
                    <div class="map-region region-3"></div>
                    <div class="map-region region-4"></div>
                    <div class="map-region region-5"></div>
                    <div class="map-region region-6"></div>
                    <div class="map-region region-7"></div>
                    <div class="map-region region-8"></div>
                    <div class="map-region region-9"></div>
                </div>
            </div>

            <!-- Right Card: Shanghai GDP -->
            <div class="card-skeleton">
                <div class="card-title-placeholder"></div>
                <div class="chart-area">
                    <div class="y-axis-label-placeholder"></div>
                    <div class="bar-chart-wrapper">
                        <div class="y-axis-placeholder"></div>
                        <div class="bars-container">
                            <div v-for="i in 6" :key="i" :style="{ height: getBarHeight(i, true) }"
                                class="bar-placeholder">
                            </div>
                        </div>
                    </div>
                    <div class="x-axis-placeholder"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// Helper function to get varying bar heights for visual diversity
const getBarHeight = (index: number, isGdpChart = false): string => {
    if (isGdpChart) {
        const heights = ['65%', '70%', '78%', '85%', '90%', '95%']; // Heights for GDP chart
        return heights[index - 1];
    } else {
        const heights = ['65%', '70%', '82%', '95%', '80%', '75%']; // Heights for population chart
        return heights[index - 1];
    }
};
</script>

<style scoped lang="scss">
/* Basic styling for the entire skeleton container */
.skeleton-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #f0f2f5;
    /* Light background similar to the image */
    font-family: 'Inter', sans-serif;
    /* Using Inter as specified */
    box-sizing: border-box;
    min-height: 100vh;
    /* Ensure it takes full viewport height */
    width: 100%;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    padding: 20px;
}

/* Header section styling */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
    gap: 10px;
    /* Space between elements */
}

/* Main title placeholder */
.title-placeholder {
    width: 280px;
    /* Wider title */
    max-width: 80%;
    height: 38px;
    /* Taller title */
    background-color: #e0e0e0;
    border-radius: 6px;
    animation: pulse 1.5s infinite ease-in-out;
}

/* Button container for the two buttons */
.button-container {
    display: flex;
    gap: 8px;
    /* Space between buttons */
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Button placeholder */
.button-placeholder {
    width: 100px;
    /* Standard button width */
    height: 30px;
    background-color: #4CAF50;
    /* Greenish background for the active button */
    border-radius: 18px;
    /* More rounded pill shape */
    animation: pulse 1.5s infinite ease-in-out;

    &.secondary {
        background-color: #c9c9c9;
        /* Grey for the inactive button */
    }
}

/* Subtitle placeholder */
.subtitle-placeholder {
    width: 180px;
    /* Subtitle width */
    max-width: 60%;
    height: 22px;
    background-color: #e0e0e0;
    border-radius: 4px;
    animation: pulse 1.5s infinite ease-in-out;
}

/* Content section styling */
.content {
    display: flex;
    justify-content: center;
    /* Center the cards horizontally */
    gap: 40px;
    /* Space between cards */
    flex-wrap: wrap;
    /* Allow cards to wrap on smaller screens */
    width: 100%;
    max-width: 1200px;
    /* Max width for content, adjust as needed */
    margin: 0 auto;
    /* Center the content block */
}

/* Card skeleton base styling */
.card-skeleton {
    flex: 1 1 300px;
    /* Allow cards to grow/shrink, with a base width */
    background-color: #fff;
    border-radius: 10px;
    /* Slightly more rounded corners */
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Softer, more pronounced shadow */
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    min-width: 280px;
    /* Minimum width for cards */
    max-width: 400px;
    /* Max width for side cards */

    /* Specific styling for the map card, which is wider */
    &.map-card-skeleton {
        flex: 2 1 450px;
        /* Map card can take more space */
        max-width: 600px;
        /* Max width for map card */
        min-width: 320px;
        /* Ensure map card is not too small */
    }
}

/* Card title placeholder */
.card-title-placeholder {
    width: 120px;
    height: 24px;
    background-color: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
    /* Space below the title */
    animation: pulse 1.5s infinite ease-in-out;

    &.wide {
        width: 180px;
        /* Wider title for the map card */
    }
}

/* Chart area wrapper for bar charts */
.chart-area {
    display: flex;
    flex-direction: column;
    height: 250px;
    /* Fixed height for the chart area */
    position: relative;
    margin-top: 10px;
}

.y-axis-label-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 15px;
    background-color: #e0e0e0;
    border-radius: 3px;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: left bottom;
    left: -20px;
    /* Adjust position */
    top: 100px;
    /* Adjust position */
    animation: pulse 1.5s infinite ease-in-out;
}

.bar-chart-wrapper {
    flex-grow: 1;
    display: flex;
    padding-left: 30px;
    /* Space for Y-axis */
    padding-bottom: 20px;
    /* Space for X-axis labels */
    position: relative;
}

.y-axis-placeholder {
    width: 2px;
    background-color: #d0d0d0;
    margin-right: 10px;
}

.bars-container {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    /* Bars start from the bottom */
    justify-content: space-around;
    gap: 10px;
    border-bottom: 2px solid #d0d0d0;
    /* X-axis line */
    padding-bottom: 2px;
    /* Small space above the axis line */
}

.bar-placeholder {
    flex: 1;
    max-width: 40px;
    /* Max width for individual bars */
    background-color: #66b3ff;
    /* Blue color for bars, similar to image */
    border-radius: 4px 4px 0 0;
    /* Rounded top corners */
    animation: pulse 1.5s infinite ease-in-out;
}

.x-axis-placeholder {
    position: absolute;
    bottom: 0;
    left: 30px;
    /* Aligned with y-axis start */
    width: calc(100% - 30px);
    height: 15px;
    background-color: #e0e0e0;
    border-radius: 3px;
    animation: pulse 1.5s infinite ease-in-out;
    transform: translateY(20px);
    /* Move below the bars */
}

/* Map placeholder styling */
.map-placeholder {
    width: 100%;
    height: 380px;
    /* Taller map area */
    background-color: #e0e0e0;
    /* Grey background for the map area */
    border-radius: 8px;
    animation: pulse 1.5s infinite ease-in-out;
    position: relative;
    overflow: hidden;
    /* Hide overflowing map regions */
}

/* Small, abstract region shapes within the map */
.map-region {
    position: absolute;
    background-color: #c9c9c9;
    /* Slightly darker grey for regions */
    border-radius: 3px;
    animation: pulse 1.5s infinite ease-in-out;

    &.region-1 {
        top: 10%;
        left: 30%;
        width: 40px;
        height: 30px;
        transform: rotate(10deg);
    }

    &.region-2 {
        top: 5%;
        left: 50%;
        width: 60px;
        height: 40px;
        transform: rotate(-15deg);
    }

    &.region-3 {
        top: 25%;
        left: 15%;
        width: 50px;
        height: 35px;
        transform: rotate(5deg);
    }

    &.region-4 {
        top: 40%;
        left: 40%;
        width: 70px;
        height: 50px;
        transform: rotate(-5deg);
    }

    &.region-5 {
        top: 60%;
        left: 20%;
        width: 45px;
        height: 30px;
        transform: rotate(20deg);
    }

    &.region-6 {
        top: 70%;
        left: 55%;
        width: 55px;
        height: 40px;
        transform: rotate(-10deg);
    }

    &.region-7 {
        top: 80%;
        left: 40%;
        width: 30px;
        height: 25px;
        transform: rotate(15deg);
    }

    &.region-8 {
        top: 50%;
        left: 70%;
        width: 60px;
        height: 45px;
        transform: rotate(-20deg);
    }

    &.region-9 {
        top: 15%;
        left: 75%;
        width: 35px;
        height: 25px;
        transform: rotate(0deg);
    }
}

/* Keyframe animation for the pulsing effect */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .content {
        flex-direction: column;
        align-items: center;
    }

    .card-skeleton,
    .map-card-skeleton {
        width: 90%;
        /* Take more width on smaller screens */
        max-width: 600px;
        /* Limit max width for all cards */
        flex: none;
        /* Disable flex-grow/shrink */
    }
}

@media (max-width: 600px) {
    .skeleton-container {
        padding: 15px;
    }

    .title-placeholder {
        width: 200px;
        height: 30px;
    }

    .button-placeholder {
        width: 90px;
        height: 28px;
    }

    .subtitle-placeholder {
        width: 140px;
        height: 20px;
    }

    .card-skeleton {
        padding: 20px;
        min-width: unset;
    }
}
</style>